<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
	<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
   <div id="box">
           <!-- v-model实现双向数据绑定 -->
           <input type="text" v-model="myVal">
           <ul>
               <!-- 函数表达式返回过滤后的数组 -->
               <li v-for="item in updateData()">
                   {{item}}
               </li>
           </ul>
       </div>
       <script>
           var vm = new Vue({
               el:"#box",
               data:{
                   //绑定数据的模型
                   myVal:"",
                   list:["aaa","bbb","abc","bac","bbc","cbb","ccc"]
               },
               methods:{
                   updateData(){
                       //根据数据myVal的实时变化，返回过滤后的数组
                       return this.list.filter(item=>item.includes(this.myVal));
                   }
               }
           })
       </script>
</body>

</html>